/*
 * 商城数据大盘
 * @Author: along
 * @Date: 2020-01-14 18:17:00
 */
<template>
    <div class="container studentDataAnalysis">
        <!-- 工作首页指标 -->
        <shopHead
            :title="work.work_home"
            v-if=" !authResult.auth_home && !authResult.auth_app_type && !authResult.auth_apply ? false : true"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_home"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="work_funel.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">工作模块访客量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="已登录用户，进入工作页的用户数量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ workHome.index_view_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">工作卡片点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指工作卡片的点击次数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ workHome.project_click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">客服icon点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指客服icon的点击次数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ workHome.project_kf_click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">报名人数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指提交报名的总人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ workHome.project_apply_count }}</div>
                    </div>
                </div>
            </div>
            <div class="main">
                <!-- 工作流量来源分析 -->
                <div
                    class="main-flow"
                    v-if="authResult.auth_app_type"
                >
                    <div class="main-content">
                        <p class="main-content-title">工作流量来源分析</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="work_flow.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(2)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <el-table
                        :data="workHomeList"
                        max-height="160"
                        height="160px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="origin"
                            label="来源"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="index_view_user_count"
                            label="访客数"
                            show-overflow-tooltip
                            align="center"
                        />
                        <el-table-column
                            prop="project_apply_count"
                            label="报名人数"
                            show-overflow-tooltip
                            align="center"
                        />
                        <el-table-column
                            prop="project_apply_count"
                            label="转化率"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.index_view_user_count !== 0 && scope.row.project_apply_count !== 0">
                                    {{ (scope.row.project_apply_count / scope.row.index_view_user_count).toFixed(2) | isNaN }}
                                </span>
                                <span v-else>0</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 搜索购买漏斗 -->
                <div
                    class="main-funnel"
                    v-if="authResult.auth_apply"
                >
                    <div class="main-content">
                        <p class="main-content-title">工作报名漏斗</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="work_invite.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(3)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <div class="main-funnel-cont">
                        <div class="main-cont-list">
                            <p class="main-list-title">浏览工作卡片</p>
                            <p class="main-list-cont">
                                <span
                                    style="font-size:20px"
                                    class="main-list-ratio">100%</span>
                                <span class="main-list-number">{{ workInvite.project_view_count }}</span>
                            </p>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">点击卡片</p>
                            <div class="main-list-cont  blue">
                                <p class="main-list-ratio">
                                    <span
                                        style="font-size:20px"
                                        v-if="workInvite.project_click_count !== 0 && workInvite.project_view_count !== 0">
                                        {{ (workInvite.project_click_count / workInvite.project_view_count * 100).toFixed(2) | isNaN }}%
                                    </span>
                                    <span v-else>0%</span>
                                </p>
                                <span class="main-list-number">{{ workInvite.project_click_count }}</span>
                            </div>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">点击咨询客服</p>
                            <div class="main-list-cont  green">
                                <p class="main-list-ratio">
                                    <span
                                        style="font-size:20px"
                                        v-if="workInvite.project_kf_click_count !== 0 && workInvite.project_view_count !== 0">
                                        {{ (workInvite.project_kf_click_count / workInvite.project_view_count * 100).toFixed(2) | isNaN }}%
                                    </span>
                                    <span v-else>0%</span>
                                </p>
                                <span class="main-list-number">{{ workInvite.project_kf_click_count }}</span>
                            </div>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">点击报名</p>
                            <div class="main-list-cont  orig">
                                <p class="main-list-ratio">
                                    <span
                                        style="font-size:20px"
                                        v-if="workInvite.project_apply_click_count !== 0 && workInvite.project_view_count !== 0">
                                        {{ (workInvite.project_apply_click_count / workInvite.project_view_count * 100).toFixed(2) | isNaN }}%
                                    </span>
                                    <span v-else>0%</span>
                                </p>
                                <span class="main-list-number">{{ workInvite.project_apply_click_count }}</span>
                            </div>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">提交报名</p>
                            <div class="main-list-cont  red">
                                <p class="main-list-ratio">
                                    <span
                                        style="font-size:20px"
                                        v-if="workInvite.project_apply_count !== 0 && workInvite.project_view_count !== 0">
                                        {{ (workInvite.project_apply_count / workInvite.project_view_count * 100).toFixed(2) | isNaN }}%
                                    </span>
                                    <span v-else>0%</span>
                                </p>
                                <span class="main-list-number">{{ workInvite.project_apply_count }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 首页工作卡片 -->
            <shopHead
                :title="work.word_card"
                v-if="authResult.auth_project"
            />
            <div class="student">
                <div
                    class="student-home"
                    v-if="authResult.auth_project"
                >
                    <div class="main-content">
                        <p class="main-content-title">数据展示</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="work_card.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(4)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <div class="zd-data zd-data-card">
                        <div class="zd-list">
                            <div class="zd-head">
                                <p class="zd-head-title">人均工作卡片浏览量</p>
                                <el-popover
                                    placement="top-start"
                                    width="200"
                                    trigger="hover"
                                    content="工作卡片浏览总个数/工作模块访客量">
                                    <el-button slot="reference">
                                        <i class="el-icon-hand-tishi iconfont" />
                                    </el-button>
                                </el-popover>
                            </div>
                            <div class="zd-content">
                                <span v-if="cardList.project_view_count !== 0 && cardList.index_view_user_count !== 0">
                                    {{ (cardList.project_view_count / cardList.index_view_user_count).toFixed(2) | isNaN }}
                                </span>
                                <span v-else>0</span>
                            </div>
                        </div>
                        <div class="zd-list">
                            <div class="zd-head">
                                <p class="zd-head-title">人均工作卡片点击查看量</p>
                                <el-popover
                                    placement="top-start"
                                    width="200"
                                    trigger="hover"
                                    content="工作卡片点击总次数/工作模块访客量">
                                    <el-button slot="reference">
                                        <i class="el-icon-hand-tishi iconfont" />
                                    </el-button>
                                </el-popover>
                            </div>
                            <div class="zd-content">
                                <span v-if="cardList.project_click_count !== 0 && cardList.index_view_user_count !== 0">
                                    {{ (cardList.project_click_count / cardList.index_view_user_count).toFixed(2) | isNaN }}
                                </span>
                                <span v-else>0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- banner -->
            <shopHead
                :title="work.work_banner"
                v-if="!authResult.auth_banner && !authResult.auth_single_banner ? false : true"
            />
            <div class="student">
                <div
                    class="student-home"
                    v-if="authResult.auth_banner"
                >
                    <div class="main-content">
                        <p class="main-content-title">数据展示</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="work_banner.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(5)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <div class="zd-data zd-data-card">
                        <div class="zd-list">
                            <div class="zd-head">
                                <p class="zd-head-title">banner区域整体点击率</p>
                                <el-popover
                                    placement="top-start"
                                    width="200"
                                    trigger="hover"
                                    content="banner区域点击次数/工作首页的浏览量">
                                    <el-button slot="reference">
                                        <i class="el-icon-hand-tishi iconfont" />
                                    </el-button>
                                </el-popover>
                            </div>
                            <div class="zd-content">
                                <span v-if="bannerList.banner_click_count !== 0 && bannerList.index_view_count !== 0">
                                    {{ (bannerList.banner_click_count / bannerList.index_view_count).toFixed(2) | isNaN }}
                                </span>
                                <span v-else>0</span>
                            </div>
                        </div>
                        <div class="zd-list">
                            <div class="zd-head">
                                <p class="zd-head-title">banner区域点击次数</p>
                                <el-popover
                                    placement="top-start"
                                    width="200"
                                    trigger="hover"
                                    content="用户在整个banner区域的点击次数之和">
                                    <el-button slot="reference">
                                        <i class="el-icon-hand-tishi iconfont" />
                                    </el-button>
                                </el-popover>
                            </div>
                            <div class="zd-content">{{ bannerList.banner_click_count }}</div>
                        </div>
                    </div>
                </div>
                <!-- 单个banner分析 -->
                <div
                    class="main-flow main-flow-banner"
                    v-if="authResult.auth_single_banner"
                >
                    <div class="main-content">
                        <p class="main-content-title">单个banner分析</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="work_invite_banner.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(6)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <el-table
                        :data="bannerInviteList"
                        max-height="160"
                        height="160px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="banner_no"
                            label="banner编号"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="image_url"
                            label="图片"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <template>
                                    <a
                                        href="javascript:;"
                                        style="color: #409EFF"
                                        @click="fnShowPreview(scope.row.image_url)">查看</a>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="start_time"
                            label="开始时间"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="end_time"
                            label="结束时间"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="update_time"
                            label="编辑时间"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.update_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="time_status"
                            label="状态"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 1">
                                    <span v-if="scope.row.time_status == 0">已隐藏</span>
                                    <span v-if="scope.row.time_status == 1">已显示</span>
                                    <span v-if="scope.row.time_status == 2">已结束</span>
                                </p>
                                <p v-if="scope.row.status == 0">已结束</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="expose_count"
                            label="曝光量"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="click_count"
                            label="点击量"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="click_count"
                            label="点击率"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                            :render-header="renderHeader2"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                    {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                                </span>
                                <span v-else>0</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="时间段"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span
                                    class="cursor-font"
                                    @click="fnGetbannerView(scope.row)"
                                >查看</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 查看数据概括 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="650px"
            :close-on-click-modal="false"
            class="el-dialog-echarts"
        >
            <div class="content_left">
                <div class="content_echarts">
                    <div
                        id="echarts_al"
                        ref="echarts_al"
                        class="echarts"
                    />
                </div>
            </div>
        </el-dialog>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import imgPreview from '@/components/common/img-preview';
import { getDate } from '@/assets/js/utils';
export default {
    mixins: [back],
    components: {
        shopHead,
        imgPreview
    },
    data () {
        return {
            work: {
                work_home: '工作首页指标',
                word_card: '工作卡片',
                work_banner: 'banner'
            },
            dialogVisible: false,
            //banner
            bannerInviteList: [],
            bannerList: {},
            work_banner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            work_invite_banner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //首页工作卡片
            cardList: {},
            work_card: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            // 学习首页指标
            workInvite: {},
            workHomeList: [],
            workHome: {},
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            work_funel: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            work_flow: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            work_invite: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //权限
            authResult: {}
        };
    },
    filters: {
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        }
    },
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '学习数据大盘'}]);
        this.authResult = this.$route.meta.authResult;

        this.getWorkList(this.getDate(0), this.getDate(1));//工作首页
        this.getFlowList(this.getDate(0), this.getDate(1));//工作流量来源分析
        this.getInviteList(this.getDate(0), this.getDate(1));//工作报名漏斗
        this.getCardList(this.getDate(0), this.getDate(1));//首页工作卡片
        this.getBannerList(this.getDate(0), this.getDate(1));//banner数据展示
        this.getInviteBanner(this.getDate(0), this.getDate(1));//单个banner分析
        console.log(this.authResult, '列表权限');
    },
    methods: {
        /**
         * 设置图表
         */
        setEcharts (row) {
            let echarts = document.getElementById('echarts_al');
            let my_echarts = this.$echarts.init(echarts);

            my_echarts.setOption({
                color:['#1890FF'],
                tooltip: {
                    trigger: 'axis'
                },
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    },
                    left: 28,
                    height: 8
                },
                //图表位置
                grid: {
                    top: 75,
                    bottom: 20,
                    height: 180
                },
                //x轴数据
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: row[0]
                },
                //y轴数据
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '数据',
                        type:'line',
                        data: row[1],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            });
        },

        /**
         * 选择日期
         * 1:工作首页指标
         * 2:工作流量来源分析
         * 3:工作报名漏斗
         * 4:首页工作卡片
         * 5:banner数据展示
         * 6:单个banner分析
         */
        fnFilterData (type) {
            if(type == 1) {
                if(this.work_funel.date === null || this.work_funel.date == '' || this.work_funel.date.length < 1) {
                    this.getWorkList(this.getDate(0), this.getDate(1));
                }else {
                    this.getWorkList(getDate(new Date(this.work_funel.date[0])) * 1000, getDate(new Date(this.work_funel.date[1])) * 1000);
                }
            } else if (type == 2) {
                if(this.work_flow.date === null || this.work_flow.date == '' || this.work_flow.date.length < 1) {
                    this.getFlowList(this.getDate(0), this.getDate(1));
                }else {
                    this.getFlowList(getDate(new Date(this.work_flow.date[0])) * 1000, getDate(new Date(this.work_flow.date[1])) * 1000);
                }
            } else if (type == 3) {
                if(this.work_invite.date === null || this.work_invite.date == '' || this.work_invite.date.length < 1) {
                    this.getInviteList(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteList(getDate(new Date(this.work_invite.date[0])) * 1000, getDate(new Date(this.work_invite.date[1])) * 1000);
                }
            } else if (type == 4) {
                if(this.work_card.date === null || this.work_card.date == '' || this.work_card.date.length < 1) {
                    this.getCardList(this.getDate(0), this.getDate(1));
                }else {
                    this.getCardList(getDate(new Date(this.work_card.date[0])) * 1000, getDate(new Date(this.work_card.date[1])) * 1000);
                }
            } else if (type == 5) {
                if(this.work_banner.date === null || this.work_banner.date == '' || this.work_banner.date.length < 1) {
                    this.getBannerList(this.getDate(0), this.getDate(1));
                }else {
                    this.getBannerList(getDate(new Date(this.work_banner.date[0])) * 1000, getDate(new Date(this.work_banner.date[1])) * 1000);
                }
            } else if (type == 6) {
                if(this.work_invite_banner.date === null || this.work_invite_banner.date == '' || this.work_invite_banner.date.length < 1) {
                    this.getInviteBanner(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteBanner(getDate(new Date(this.work_invite_banner.date[0])) * 1000, getDate(new Date(this.work_invite_banner.date[1])) * 1000);
                }
            }
        },

        /**
         * 工作首页数据展示
         */
        getWorkList (start_time, end_time) {
            this.$post('/student/statistic_work%5Cget_index_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.workHome = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 工作流量来源分析
         */
        getFlowList (start_time, end_time) {
            let list = [];

            this.$post('/student/statistic_work%5Cget_app_type_statistic', {
                start_time: parseInt(start_time / 1000),
                end_time: parseInt(end_time / 1000)
            }, resp => {
                if (resp.code == 1) {
                    for(let key in resp.data) {
                        list.push({
                            origin: key,
                            index_view_user_count: resp.data[key]['index_view_user_count'],
                            project_apply_count: resp.data[key]['project_apply_count']
                        });
                    }
                    this.workHomeList = list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 工作报名漏斗
         */
        getInviteList (start_time, end_time) {
            this.$post('/student/statistic_work%5Cget_project_apply_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.workInvite = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 首页工作卡片
         */
        getCardList (start_time, end_time) {
            this.$post('/student/statistic_work%5Cget_project_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.cardList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * banner数据展示
         */
        getBannerList (start_time, end_time) {
            this.$post('/student/statistic_work%5Cget_banner_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.bannerList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 单个banner分析
         */
        getInviteBanner (start_time, end_time) {
            this.$post('/student/statistic_work%5Cget_single_banner_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000,
                type: 1
            }, resp => {
                if (resp.code == 1) {
                    this.bannerInviteList = resp.data.banner_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 查看单个banner分析24小时数据
         */
        fnGetbannerView (row) {
            let x_data = [],
                y_data = [];

            this.$post('/student/statistic_work%5Cget_single_banner_statistic',{
                start_time: row.start_time,
                end_time: row.end_time,
                type: 2,
                banner_no: row.banner_no
            }, resp => {
                if (resp.code == 1) {
                    resp.data.banner_view_list.map(item => {
                        x_data.push(this.gethous(item.time));
                        y_data.push(item.click_count);
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });

            setTimeout(()=>{
                this.setEcharts([
                    x_data,
                    y_data
                ]);
            },500);

            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 设置表头
         */
        renderHeader(h, {}){
            return h('span', {}, [
                h('span', {}, ''),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader2(h, {}){
            return h('span', {}, [
                h('span', {}, '点击率'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '此banner的点击量/整个banner区域的浏览量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 0 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 15px 30px 15px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    .main-flow-banner {
        width: 100%;
    }
    .main-funnel {
        width: calc((100% - 10px) / 2);
        padding: 12px 15px 30px 15px;
        box-sizing: border-box;
        background: #ffffff;
        margin-left: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .main-funnel-cont {
            padding: 30px 100px 30px 101px;
            display: flex;
            height: 132px;
            align-items: center;
            justify-content: center;
            .main-cont-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                .main-list-title {
                    color: #000000;
                    font-size: 14px;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                .main-list-cont {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #81DFEA;
                    .main-list-ratio {
                        height: 40px;
                        line-height: 40px;
                        color: #ffffff;
                        font-size: 24px;
                        margin-top: 9px;
                        font-weight: 500;
                    }
                    .main-list-number {
                        height: 22px;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .blue {
                    background: #81A8EA;
                }
                .green {
                    background: #64B76D;
                }
                .orig {
                    background: #EAAC50;
                }
                .red {
                    background: #FF7470;
                }
            }
            .main-cont-arrow {
                display: flex;
                height: 100%;
                width: 35px;
                justify-content: center;
                .main-arrow-list {
                    display: flex;
                    height: 13px;
                    align-items: center;
                    margin: 48px 6px 0 8px;
                    .main-arrow-line {
                        width: 20px;
                        height: 1px;
                        background: #D8D8D8;
                    }
                    .main-arrow-delta {
                        width: 0px;
                        height: 0px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent transparent transparent #D8D8D8;
                    }
                }
            }
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 4);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
    }
    .zd-data-card .zd-list {
        width: calc(100% / 2);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .studentDataAnalysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
    }
</style>